<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://xmlns.jcp.org/jsf/passthrough">

<body>


	<div class="row">
		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
			<h1 class="page-title txt-color-blueDark">
				<i class="fa fa-pencil-square-o fa-fw "></i> Pacientes <span>>
					Consulta de Pacientes Ingresados</span>
			</h1>
		</div>
	</div>

	<!-- widget grid -->
	<section id="widget-grid" class="">

		<!-- row -->
		<div class="row">

			<!-- NEW WIDGET START -->
			<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

				<!-- Widget ID (each widget will need unique ID)-->
				<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1"
					data-widget-editbutton="false">
					<!-- widget options:
				usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-collapsed="true"
				data-widget-sortable="false"

				-->
					<header>
						<span class="widget-icon"> <i class="fa fa-table"></i>
						</span>
						<h2>Pacientes</h2>

					</header>

					<!-- widget div-->
					<div>

						<!-- widget edit box -->
						<div class="jarviswidget-editbox">
							<!-- This area used as dropdown edit box -->

						</div>
						<!-- end widget edit box -->

						<!-- widget content -->
						<div class="widget-body no-padding">
						<h:form>
							<h:dataTable value="#{consultaPacientesClubViewBean.personas}"  var="persona" 
								styleClass="table table-striped table-bordered table-hover"
								id="dt_basic" >

								<h:column>
									<f:facet name="header">Apellidos</f:facet>
									<h:outputText value="#{persona.apellido}" />
								</h:column>
								<h:column>
									<f:facet name="header">Nombre</f:facet>
									<h:outputText value="#{persona.nombre}" />
								</h:column>
								<h:column>
									<f:facet name="header">Nro. de Documento</f:facet>
									<h:outputText value="#{persona.numeroDoc}" />
								</h:column>

								<h:column>
									<f:facet name="header">Acciones</f:facet>
									<nav>
	                                    <ul>
	                                         <li>
	                                         	<h:commandLink p:href="ajax/solicitudAptoMedico.xhtml"  ><i class="fa fa-lg fa-fw fa-pencil"></i>Apto<f:ajax event="click" listener="#{solicitudBean.consultarPaciente(persona.id)}"/></h:commandLink>
                                             </li>
                                        </ul>
                                   </nav>
								</h:column>
							</h:dataTable>				
					</h:form>
						</div>
						<!-- end widget content -->

					</div>
					<!-- end widget div -->

				</div>
				<!-- end widget -->
			</article>

		</div>


	</section>
	<!-- end widget grid -->

	<h:outputScript>
    <![CDATA[
		/*
		 * Load bootstrap wizard dependency
		 */

		loadScript(
				"javax.faces.resource/plugin/bootstrap-wizard/jquery.bootstrap.wizard.min.js.xhtml?ln=js",
				runBootstrapWizard);

		//Bootstrap Wizard Validations

		function save() {

		}

		function runBootstrapWizard() {

			var $validator = $("#wizard-1")
					.validate(
							{

								rules : {
									email : {
										required : true,
										email : "Your email address must be in the format of name@domain.com"
									},
									nombre : {
										required : true
									},
									presentarEn : {
										required : true
									},
									apellido : {
										required : true
									},
									sexo : {
										required : true
									},
									tipoDoc : {
										required : true
									},
									numeroDoc : {
										required : true
									},
									postal : {
										required : true,
										minlength : 4
									},
									telefono : {
										required : true,
										minlength : 10
									},
									celular : {
										required : true,
										minlength : 10
									}
								},

								messages : {
									fname : "Please specify your First name",
									lname : "Please specify your Last name",
									email : {
										required : "We need your email address to contact you",
										email : "Your email address must be in the format of name@domain.com"
									}
								},

								highlight : function(element) {
									$(element).closest('.form-group')
											.removeClass('has-success')
											.addClass('has-error');
								},
								unhighlight : function(element) {
									$(element).closest('.form-group')
											.removeClass('has-error').addClass(
													'has-success');
								},
								errorElement : 'span',
								errorClass : 'help-block',
								errorPlacement : function(error, element) {
									if (element.parent('.input-group').length) {
										error.insertAfter(element.parent());
									} else {
										error.insertAfter(element);
									}
								}
							});

			$('#bootstrap-wizard-1').bootstrapWizard(
					{
						'tabClass' : 'form-wizard',
						'onNext' : function(tab, navigation, index) {
							var $valid = $("#wizard-1").valid();
							if (!$valid) {
								$validator.focusInvalid();
								return false;
							} else {
								$('#bootstrap-wizard-1').find('.form-wizard')
										.children('li').eq(index - 1).addClass(
												'complete');
								$('#bootstrap-wizard-1').find('.form-wizard')
										.children('li').eq(index - 1).find(
												'.step').html(
												'<i class="fa fa-check"></i>');
							}
						}
					});

		}
		
		// PAGE RELATED SCRIPTS

		loadDataTableScripts();
		function loadDataTableScripts() {
			loadScript("javax.faces.resource/plugin/datatables/jquery.dataTables-cust.min.js.xhtml?ln=js", dt_2);

			function dt_2() {
				loadScript("javax.faces.resource/plugin/datatables/ColReorder.min.js.xhtml?ln=js", dt_3);
			}

			function dt_3() {
				loadScript("javax.faces.resource/plugin/datatables/FixedColumns.min.js.xhtml?ln=js", dt_4);
			}

			function dt_4() {
				loadScript("javax.faces.resource/plugin/datatables/ColVis.min.js.xhtml?ln=js", dt_5);
			}

			function dt_5() {
				loadScript("javax.faces.resource/plugin/datatables/ZeroClipboard.js.xhtml?ln=js", dt_6);
			}

			function dt_6() {
				loadScript("javax.faces.resource/plugin/datatables/media/js/TableTools.min.js.xhtml?ln=js", dt_7);
			}

			function dt_7() {
				loadScript("javax.faces.resource/plugin/datatables/DT_bootstrap.js.xhtml?ln=js", runDataTables);
			}

		}

		function runDataTables() {

			/*
			 * BASIC
			 */
			$('#dt_basic').dataTable({
				"sPaginationType" : "bootstrap_full"
			});

			/* END BASIC */

			/* Add the events etc before DataTables hides a column */
			$("#datatable_fixed_column thead input").keyup(function() {
				oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("thead input").index(this)));
			});

			$("#datatable_fixed_column thead input").each(function(i) {
				this.initVal = this.value;
			});
			$("#datatable_fixed_column thead input").focus(function() {
				if (this.className == "search_init") {
					this.className = "";
					this.value = "";
				}
			});
			$("#datatable_fixed_column thead input").blur(function(i) {
				if (this.value == "") {
					this.className = "search_init";
					this.value = this.initVal;
				}
			});		
			

			var oTable = $('#datatable_fixed_column').dataTable({
				"sDom" : "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
				//"sDom" : "t<'row dt-wrapper'<'col-sm-6'i><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'>>",
				"oLanguage" : {
					"sSearch" : "Search all columns:"
				},
				"bSortCellsTop" : true
			});		
			


			/*
			 * COL ORDER
			 */
			$('#datatable_col_reorder').dataTable({
				"sPaginationType" : "bootstrap",
				"sDom" : "R<'dt-top-row'Clf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
				"fnInitComplete" : function(oSettings, json) {
					$('.ColVis_Button').addClass('btn btn-default btn-sm').html('Columns <i class="icon-arrow-down"></i>');
				}
			});
			
			/* END COL ORDER */

			/* TABLE TOOLS */
			$('#datatable_tabletools').dataTable({
				"sDom" : "<'dt-top-row'Tlf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
				"oTableTools" : {
					"aButtons" : ["copy", "print", {
						"sExtends" : "collection",
						"sButtonText" : 'Save <span class="caret" />',
						"aButtons" : ["csv", "xls", "pdf"]
					}],
					"sSwfPath" : "js/plugin/datatables/media/swf/copy_csv_xls_pdf.swf"
				},
				"fnInitComplete" : function(oSettings, json) {
					$(this).closest('#dt_table_tools_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function() {
						$(this).addClass('btn-sm btn-default');
					});
				}
			});
			
			/* END TABLE TOOLS */

		}

		/*
		 * Load fuelux wizard dependency
		 */
		/* 	loadScript("javax.faces.resource/plugin/fuelux/wizard/wizard.js.xhtml?ln=js", fueluxWizard);
		
		 function fueluxWizard() {
		
		 var wizard = $('.wizard').wizard();
		
		 wizard.on('finished', function (e, data) {
		 //$("#fuelux-wizard").submit();
		 //console.log("submitted!");
		 $.smallBox({
		 title: "Congratulations! Your form was submitted",
		 content: "<i class='fa fa-clock-o'></i> <i>1 seconds ago...</i>",
		 color: "#5F895F",
		 iconSmall: "fa fa-check bounce animated",
		 timeout: 4000
		 });
		
		 });
		
		 } */
    ]]>
</h:outputScript>


</body>

</html>
